<template>
  <div class="musicList">
    <div class="musicHeader">
      <i class="iconfont purple-back" @click="$router.back()"></i>
      <div>{{ obj.name }}</div>
    </div>
    <div :style="coverStyle" class="cover" ref="img">
      <div class="filter"></div>
      <div v-show="textVisible" class="clickRandom" @click="clickRandom">
        <i class="iconfont purple-play2"></i>
        <span class="text">随机播放全部</span>
      </div>
    </div>
    <div
      v-noResult="musicList.length === 0"
      :style="songListStyle"
      class="songList-wrapper"
    >
      <Scroll class="scroll" :probe-type="3" @scroll="onScroll">
        <SongList
          :song-list="musicList"
          :number-visible="numberVisible"
          @select="selectItem"
        ></SongList>
      </Scroll>
    </div>
  </div>
</template>

<script>
import SongList from '@/components/Base/SongList/SongList'
import Scroll from '@/components/Base/ScrollContainer'
import { useStore, mapActions } from 'vuex'
import { computed } from 'vue'
import { getObj } from '@/assets/js/sessionStore'

const IMG_HEADER_HEIGHT = 40

// import createDetailComponent from '@/assets/js/createDetailComponent'

export default {
  name: 'MusicList',
  components: {
    SongList,
    Scroll
  },
  props: {
    musicList: {
      required: true,
      type: Array
    },
    objectKey: {
      required: true,
      type: String
    },
    numberVisible: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const { state } = useStore()
    const playList = computed(() => {
      return state.play.playList
    })
    return {
      playList
    }
  },
  data() {
    return {
      imgHeight: 0,
      zIndex: 0,
      posY: 0,
      obj: {},
      textVisible: true
    }
  },
  computed: {
    coverStyle() {
      const pic = this.obj.pic
      let zIndex = this.zIndex
      const posY = this.posY
      let scale = 1
      if (posY < 0) {
        scale = this.calculateScale(posY)
        zIndex = 2
      } else {
        scale = 1
      }
      return {
        backgroundImage: `url(${pic})`,
        backgroundSize: 'cover',
        height: zIndex > 0 && scale === 1 ? `${IMG_HEADER_HEIGHT}px` : 0,
        paddingTop: zIndex > 0 && scale === 1 ? '0' : '70%',
        zIndex,
        transform: `scale(${scale}) translateZ(1px)`
      }
    },
    songListStyle() {
      return {
        top: `${this.imgHeight}px`,
        bottom: this.playList.length === 0 ? 0 : '60px'
      }
    }
  },
  created() {
    this.obj = getObj(this.objectKey)
  },
  mounted() {
    this.imgHeight = this.$refs.img.offsetHeight
  },
  methods: {
    ...mapActions({
      selectPlay: 'play/selectPlay',
      randomPlay: 'play/randomPlay'
    }),
    onScroll(posY) {
      this.posY = posY
      const d = this.imgHeight - posY
      if (d <= IMG_HEADER_HEIGHT) {
        this.zIndex = 2
        this.textVisible = false
      } else {
        this.zIndex = 0
        this.textVisible = true
      }
    },

    calculateScale(posY) {
      const y = -posY
      const MAX_DISTANCE = 100
      const MAX_SCALE = 0.5
      // 100/0.5 = y/x
      return (MAX_SCALE * y) / MAX_DISTANCE + 1
    },

    selectItem({ song, index }) {
      this.selectPlay({
        list: this.musicList,
        index
      })
    },

    // 洗牌
    clickRandom() {
      this.randomPlay(this.musicList)
    }
  }
}
</script>

<style lang="scss" scoped>
.musicList {
  height: 100%;
  position: relative;
  .musicHeader {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 40px;
    padding: 0 20px;
    > i {
      color: $color-button-little;
      font-size: 20px;
    }
    > div {
      flex: 1;
      text-align: center;
      height: 40px;
      line-height: 40px;
      color: #fff;
      font-size: 16px;
    }
  }
  .cover {
    position: relative;
    .filter {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(7, 17, 27, 0.4);
    }
    .clickRandom {
      display: flex;
      align-items: center;
      padding: 5px 10px;
      position: absolute;
      left: 50%;
      bottom: 20px;
      transform: translate3d(-50%, 0, 0);
      border: 1px solid $color-list-title;
      border-radius: 100px;
      color: $color-list-title;
      > i {
        font-size: 18px;
      }
      > span {
        font-size: 12px;
      }
    }
  }
  .songList-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    .scroll {
      overflow: visible;
      /deep/.scroll-inner {
        background: #fff;
      }
    }
  }
}
</style>
